<template>
  <div class="page">
    <Navbar bgColor="#ecf3fd"></Navbar>
    <!-- 顶部用户信息 -->
    <view class="user-section">
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar || '/static/my/default_avatar.png'" mode="aspectFit" />
        <view class="info-right" v-if="token" @click="toDetail">
          <view class="name">{{ userInfo.nickname || '微信昵称' }}</view>
          <view class="phone">{{ userInfo.mobile || '' }}</view>
        </view>
        <view class="info-right" v-else @click="toLogin">
          <view class="name">未登录</view>
<!--          <view class="login-btn" >去登录 ></view>-->
        </view>
        <!--         <view class="edit-btn" @click="toUserDetail" v-if="token">编辑资料 ></view>-->
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-item" @click="showPop = true">
        <image src="@/static/my/service.png" class="function-icon" mode="aspectFit" />
        <text>联系客服</text>
      </view>
      <view class="function-item" @click="toHelp">
        <image src="@/static/my/help.png" class="function-icon" mode="aspectFit" />
        <text>使用帮助</text>
      </view>
      <view class="function-item" @click="toLogout" v-if="token">
        <image src="@/static/my/logout.png" class="function-icon" mode="aspectFit" />
        <text>退出登录</text>
      </view>
    </view>
    <!-- 客服弹窗 -->
    <u-popup
        round="16"
        mode="center"
        bgColor="#fff"
        v-model="showPop"
        :closeable="true">
      <div class="serve-popup">
        <div class="serve-box">
          <view class="serve-image">
            <u-image width="100%" height="60%" src="/static/profile/server_image.png"></u-image>
          </view>
          <div class="serve-name">请拨打客服热线</div>
          <div class="serve-phone">400000000</div>
          <div class="serve-btn" @click="toPhone('400000000')">立即拨打</div>
          <div class="serve-cancel" @click="showPop = false">取消</div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Tabbar from "@/components/Tabbar.vue"
import Page from "@/components/Page.vue"
import Navbar from "../../components/navbar.vue";

export default {
  components: {Navbar, Tabbar,Page },
  computed: {
    ...mapGetters(['token', 'userInfo', 'balance']),
  },
  data() {
    return {
      showPop: false,
      isLogin: false
    }
  },
  onShow() {
    this.$store.dispatch('getUserInfo')
    this.$store.dispatch('getBalance')
  },
  methods: {
    toUserDetail() {
      uni.navigateTo({ url: '/pages/my/detail' })
    },
    toCarManage() {
      uni.navigateTo({ url: '/pages/my/car-manage' })
    },
    toHelp() {
      uni.navigateTo({ url: '/pages/policy/help' })
    },
    toPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber
      })
    },
    toLogout() {
      this.$store.commit('logout')
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    toRecharge() {
      if (!this.token) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/wallet/recharge'
      })
    },
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    toDetail() {
      uni.navigateTo({
        url: '/pages/my/detail'
      })
    }
  }
}
</script>

<style lang="scss">

.user-section {
  background: #ecf3fd;
  padding:0 40rpx 32rpx;
  position: relative;

  .header-right {
    position: absolute;
    top: 40rpx;
    right: 32rpx;
    display: flex;
    gap: 32rpx;

    .icon {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 32rpx;
    }

    .info-right {
      flex: 1;

      .name {
        font-size: 36rpx;
        font-weight: 500;
        color: #333;
      }

      .phone {
        font-size: 28rpx;
        color: #999;
      }

      .login-btn {
        font-size: 28rpx;
        color: #1296db;
        font-weight: 500;
      }
    }
  }

  .user-data {
    display: flex;
    justify-content: space-around;

    .data-item {
      text-align: center;

      .value {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }

      .label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.vip-card {
  margin: 24rpx 32rpx;
  background: linear-gradient(135deg, #FFE5BA, #FFB74D);
  border-radius: 24rpx;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(255, 183, 77, 0.2);

  .left {
    display: flex;
    align-items: center;

    .crown-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 16rpx;
    }

    .vip-text {
      display: flex;
      align-items: baseline;

      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #666;
        margin-right: 12rpx;
      }

      .desc {
        font-size: 36rpx;
        color: #333;
        font-weight: 600;
      }
    }
  }

  .right {
    .open-vip {
      background: rgba(255, 255, 255, 0.9);
      border: none;
      border-radius: 32rpx;
      font-size: 32rpx;
      padding: 8rpx 24rpx;
      color: #FF9800;
      font-weight: 500;
      transition: all 0.3s;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      line-height: 1.2;

      &:active {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

.car-section {
  margin: 24rpx 32rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    .title {
      display: flex;
      align-items: center;

      .line {
        width: 6rpx;
        height: 32rpx;
        background: #1296db;
        margin-right: 16rpx;
        border-radius: 3rpx;
      }

      text {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }
    }

    .manage {
      font-size: 28rpx;
      color: #666;
    }
  }

  .car-info {
    text-align: center;

    .car-image {
      width: 100%;
      height: 300rpx;
      margin-bottom: 24rpx;
    }

    .car-name {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 32rpx;
    }

    .car-data {
      display: flex;
      justify-content: space-around;

      .data-box {
        text-align: center;

        .value {
          font-size: 40rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }

        .label {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

.function-list {
  margin: 24rpx 32rpx;
  background: #FFFFFF;
  border-radius: 24rpx;

  .function-item {
    display: flex;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #F5F5F5;

    &:last-child {
      border-bottom: none;
    }

    .function-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 24rpx;
    }

    text {
      flex: 1;
      font-size: 32rpx;
      color: #333;
    }

    .arrow-icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.serve-popup {
  border-radius: 8px;
  width: 345px;
  height: 400px;
  background-color: #F5F6FA;
  position: relative;
  overflow: hidden;

  .serve-box {
    overflow: hidden;
    padding-bottom: 50rpx;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    .serve-image {
      position: absolute;
      left: 0;
      top: -100rpx;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 0;
      pointer-events: auto;
    }

    .serve-name {
      font-size: 36rpx;
      color: #333;
      margin-bottom: 30rpx;
      position: relative;
      z-index: 1;
    }

    .serve-phone {
      font-size: 36rpx;
      color: #333;
      margin-bottom: 40rpx;
      position: relative;
      z-index: 1;
    }

    .serve-btn {
      width: 502rpx;
      height: 92rpx;
      background: linear-gradient(90deg, #75ACFF 4%, #3180FF 100%);
      border-radius: 46rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 36rpx;
      margin-bottom: 40rpx;
      position: relative;
      z-index: 1;
    }

    .serve-cancel {
      font-size: 36rpx;
      color: #0089FF;
      position: relative;
      z-index: 1;
    }
  }
}
</style>
